import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TextInput,
  TouchableOpacity,
  Dimensions,
  StatusBar,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { LineChart } from 'react-native-chart-kit';
import Icon from '../../components/Icon';
import { SafeAreaView } from 'react-native-safe-area-context';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const HomeScreen = () => {
  const [searchQuery, setSearchQuery] = useState('AAPL');
  const [predictionDays, setPredictionDays] = useState(10);
  const [customData, setCustomData] = useState('');

  // 模拟股票数据
  const stockData = {
    symbol: 'AAPL',
    companyName: 'Apple Inc.',
    price: 185.64,
    change: 2.45,
    changePercent: 1.34,
    exchange: 'NASDAQ',
  };

  // 模拟图表数据
  const chartData = {
    labels: ['日K', '周K', '月K'],
    datasets: [
      {
        data: [150, 160, 170, 165, 175, 180, 185, 190, 185, 195],
        color: (opacity = 1) => `rgba(81, 150, 244, ${opacity})`,
        strokeWidth: 2,
      },
    ],
  };

  // 模拟预测结果数据
  const predictionData = {
    confidence: 78,
    factors: [
      { name: '政策利好', impact: '+85%', color: '#4CAF50' },
      { name: '行业风险', impact: '-30%', color: '#F44336' },
      { name: '财报预期', impact: '+65%', color: '#4CAF50' },
    ],
  };

  const renderHeader = () => (
    <LinearGradient
      colors={['#5196F4', '#4285F4']}
      style={styles.header}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
    >
      <View style={styles.headerContent}>
        <Text style={styles.headerTitle}>AI股票预测</Text>
        {/* <Text style={styles.headerSubtitle}>智能分析·精准预测</Text> */}
        <TouchableOpacity style={styles.settingsButton}>
          <Icon name="settings" size={24} color="#FFFFFF" />
        </TouchableOpacity>
      </View>
    </LinearGradient>
  );

  const renderSearchSection = () => (
    <View style={styles.searchSection}>
      <View style={styles.searchContainer}>
        <Icon name="search" size={20} color="#666" style={styles.searchIcon} />
        <TextInput
          style={styles.searchInput}
          value={searchQuery}
          onChangeText={setSearchQuery}
          placeholder="AAPL"
          placeholderTextColor="#999"
        />
        <TouchableOpacity>
          <Icon name="keyboard-arrow-down" size={20} color="#666" />
        </TouchableOpacity>
      </View>
      <TouchableOpacity style={styles.searchButton}>
        <Text style={styles.searchButtonText}>搜索</Text>
      </TouchableOpacity>
    </View>
  );

  const renderStockInfo = () => (
    <View style={styles.stockInfoContainer}>
      <View style={styles.stockHeader}>
        <Text style={styles.stockSymbol}>● {stockData.symbol}</Text>
        <Text style={styles.stockPrice}>${stockData.price}</Text>
      </View>
      <View style={styles.stockDetails}>
        <Text style={styles.companyName}>{stockData.companyName}</Text>
        <View style={styles.changeContainer}>
          <Text style={styles.changeText}>
            +{stockData.change} (+{stockData.changePercent}%)
          </Text>
          <Text style={styles.exchangeText}>{stockData.exchange}</Text>
        </View>
      </View>
    </View>
  );

  const renderChart = () => (
    <View style={styles.chartContainer}>
      <View style={styles.chartTabs}>
        <TouchableOpacity style={[styles.chartTab, styles.activeTab]}>
          <Text style={[styles.chartTabText, styles.activeTabText]}>日K</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.chartTab}>
          <Text style={styles.chartTabText}>周K</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.chartTab}>
          <Text style={styles.chartTabText}>月K</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.chartWrapper}>
        <LineChart
          data={chartData}
          width={screenWidth - 60}
          height={220}
          chartConfig={{
            backgroundColor: '#ffffff',
            backgroundGradientFrom: '#ffffff',
            backgroundGradientTo: '#ffffff',
            decimalPlaces: 2,
            color: (opacity = 1) => `rgba(81, 150, 244, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(102, 102, 102, ${opacity})`,
            style: {
              borderRadius: 16,
            },
            propsForDots: {
              r: '4',
              strokeWidth: '2',
              stroke: '#5196F4',
            },
          }}
          bezier
          style={styles.chart}
        />
        <Text style={styles.chartPeriod}>最近3个月</Text>
      </View>
    </View>
  );

  const renderPredictionSettings = () => (
    <View style={styles.predictionContainer}>
      <Text style={styles.sectionTitle}>AI预测设置</Text>
      
      <View style={styles.settingItem}>
        <Text style={styles.settingLabel}>预测天数</Text>
        <View style={styles.sliderContainer}>
          <View style={styles.slider}>
            <View style={[styles.sliderTrack, { width: '60%' }]} />
            <View style={[styles.sliderThumb, { left: '60%' }]} />
          </View>
          <Text style={styles.sliderValue}>{predictionDays}天</Text>
        </View>
      </View>

      <View style={styles.settingItem}>
        <Text style={styles.settingLabel}>自定义数据源</Text>
        <TextInput
          style={styles.customDataInput}
          value={customData}
          onChangeText={setCustomData}
          placeholder="输入相关信息，新闻链接，分析要点..."
          placeholderTextColor="#999"
          multiline
        />
        <Text style={styles.characterCount}>0/500</Text>
      </View>

      <TouchableOpacity style={styles.uploadButton}>
        <Icon name="cloud-upload" size={20} color="#666" />
        <Text style={styles.uploadText}>上传文件 (PDF、Excel、Word等)</Text>
      </TouchableOpacity>

      {/* <View style={styles.dataSourceContainer}>
        <Text style={styles.dataSourceTitle}>数据源</Text>
        <View style={styles.dataSourceOptions}>
          <TouchableOpacity style={[styles.dataSourceOption, styles.activeOption]}>
            <Icon name="check-circle" size={16} color="#5196F4" />
            <Text style={styles.dataSourceText}>新闻</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.dataSourceOption}>
            <Text style={styles.dataSourceText}>政策</Text>
          </TouchableOpacity>
          <TouchableOpacity style={[styles.dataSourceOption, styles.activeOption]}>
            <Icon name="check-circle" size={16} color="#5196F4" />
            <Text style={styles.dataSourceText}>行业</Text>
          </TouchableOpacity>
        </View>
      </View> */}

      <TouchableOpacity style={styles.aiPredictButton}>
        <Icon name="psychology" size={20} color="#FFFFFF" />
        <Text style={styles.aiPredictText}>AI生成预测</Text>
      </TouchableOpacity>
    </View>
  );

  const renderPredictionResults = () => (
    <View style={styles.resultsContainer}>
      <Text style={styles.sectionTitle}>预测结果</Text>
      
      <View style={styles.resultChart}>
        <View style={styles.predictChart}>
          <Text style={styles.predictLabel}>预测开始</Text>
          <View style={styles.chartArea}>
            {/* 这里可以放置预测图表 */}
            <LinearGradient
              colors={['rgba(255, 107, 107, 0.3)', 'rgba(255, 107, 107, 0.1)']}
              style={styles.predictGradient}
            />
          </View>
        </View>
      </View>

      <View style={styles.confidenceContainer}>
        <Text style={styles.confidenceLabel}>置信度</Text>
        <Text style={styles.confidenceValue}>{predictionData.confidence}%</Text>
        <View style={styles.confidenceBar}>
          <View style={[styles.confidenceProgress, { width: `${predictionData.confidence}%` }]} />
        </View>
      </View>

      <View style={styles.factorsContainer}>
        <Text style={styles.factorsTitle}>影响因素</Text>
        {predictionData.factors.map((factor, index) => (
          <View key={index} style={styles.factorItem}>
            <View style={[styles.factorDot, { backgroundColor: factor.color }]} />
            <Text style={styles.factorName}>{factor.name}</Text>
            <Text style={[styles.factorImpact, { color: factor.color }]}>
              {factor.impact}
            </Text>
          </View>
        ))}
      </View>

      <TouchableOpacity style={styles.detailButton}>
        <Text style={styles.detailButtonText}>预测详情</Text>
        {/* <Icon name="keyboard-arrow-down" size={20} color="#5196F4" /> */}
      </TouchableOpacity>
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="light-content" backgroundColor="#5196F4" />
      {renderHeader()}
      <ScrollView style={styles.scrollContainer} showsVerticalScrollIndicator={false}>
        {renderSearchSection()}
        {renderStockInfo()}
        {renderChart()}
        {renderPredictionSettings()}
        {renderPredictionResults()}
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F7FA',
  },
  scrollContainer: {
    flex: 1,
  },
//   header: {
//     paddingHorizontal: 20,
//     paddingVertical: 20,
//     borderBottomLeftRadius: 20,
//     borderBottomRightRadius: 20,
//   },
  headerContent: {
    alignItems: 'center',
    position: 'relative',
  },
  headerTitle: {
    marginTop:50,
    fontSize: 24,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
  },
  settingsButton: {
    position: 'absolute',
    right: 0,
    top: 0,
  },
  searchSection: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    paddingVertical: 20,
    alignItems: 'center',
  },
  searchContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
    marginRight: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  searchIcon: {
    marginRight: 12,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
  searchButton: {
    backgroundColor: '#5196F4',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 12,
  },
  searchButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
  stockInfoContainer: {
    backgroundColor: '#FFFFFF',
    marginHorizontal: 20,
    marginBottom: 20,
    borderRadius: 12,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  stockHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  stockSymbol: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  stockPrice: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  stockDetails: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  companyName: {
    fontSize: 14,
    color: '#666',
  },
  changeContainer: {
    alignItems: 'flex-end',
  },
  changeText: {
    fontSize: 14,
    color: '#4CAF50',
    fontWeight: '600',
  },
  exchangeText: {
    fontSize: 12,
    color: '#999',
  },
  chartContainer: {
    backgroundColor: '#FFFFFF',
    marginHorizontal: 20,
    marginBottom: 20,
    borderRadius: 12,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  chartTabs: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  chartTab: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    marginRight: 16,
    borderRadius: 20,
    backgroundColor: '#F5F7FA',
  },
  activeTab: {
    backgroundColor: '#5196F4',
  },
  chartTabText: {
    fontSize: 14,
    color: '#666',
  },
  activeTabText: {
    color: '#FFFFFF',
  },
  chartWrapper: {
    alignItems: 'center',
  },
  chart: {
    marginVertical: 8,
    borderRadius: 16,
  },
  chartPeriod: {
    fontSize: 12,
    color: '#999',
    marginTop: 8,
  },
  predictionContainer: {
    backgroundColor: '#FFFFFF',
    marginHorizontal: 20,
    marginBottom: 20,
    borderRadius: 12,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 20,
  },
  settingItem: {
    marginBottom: 24,
  },
  settingLabel: {
    fontSize: 16,
    color: '#333',
    marginBottom: 12,
  },
  sliderContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  slider: {
    flex: 1,
    height: 4,
    backgroundColor: '#E0E0E0',
    borderRadius: 2,
    position: 'relative',
    marginRight: 16,
  },
  sliderTrack: {
    height: 4,
    backgroundColor: '#5196F4',
    borderRadius: 2,
  },
  sliderThumb: {
    position: 'absolute',
    top: -6,
    width: 16,
    height: 16,
    backgroundColor: '#5196F4',
    borderRadius: 8,
    marginLeft: -8,
  },
  sliderValue: {
    fontSize: 16,
    color: '#5196F4',
    fontWeight: '600',
  },
  customDataInput: {
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 8,
    padding: 12,
    fontSize: 14,
    color: '#333',
    minHeight: 80,
    textAlignVertical: 'top',
  },
  characterCount: {
    fontSize: 12,
    color: '#999',
    textAlign: 'right',
    marginTop: 4,
  },
  uploadButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 8,
    borderStyle: 'dashed',
    padding: 16,
    marginBottom: 20,
  },
  uploadText: {
    fontSize: 14,
    color: '#666',
    marginLeft: 8,
  },
  dataSourceContainer: {
    marginBottom: 24,
  },
  dataSourceTitle: {
    fontSize: 16,
    color: '#333',
    marginBottom: 12,
  },
  dataSourceOptions: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  dataSourceOption: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: '#F5F7FA',
    marginRight: 12,
    marginBottom: 8,
  },
  activeOption: {
    backgroundColor: 'rgba(81, 150, 244, 0.1)',
  },
  dataSourceText: {
    fontSize: 14,
    color: '#666',
    marginLeft: 4,
  },
  aiPredictButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#5196F4',
    borderRadius: 12,
    padding: 16,
  },
  aiPredictText: {
    fontSize: 16,
    color: '#FFFFFF',
    fontWeight: '600',
    marginLeft: 8,
  },
  resultsContainer: {
    backgroundColor: '#FFFFFF',
    marginHorizontal: 20,
    marginBottom: 20,
    borderRadius: 12,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  resultChart: {
    marginBottom: 24,
  },
  predictChart: {
    height: 200,
    backgroundColor: '#F8F9FA',
    borderRadius: 8,
    padding: 16,
    position: 'relative',
  },
  predictLabel: {
    fontSize: 12,
    color: '#666',
    marginBottom: 8,
  },
  chartArea: {
    flex: 1,
    position: 'relative',
  },
  predictGradient: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: '60%',
    borderRadius: 4,
  },
  confidenceContainer: {
    marginBottom: 24,
  },
  confidenceLabel: {
    fontSize: 16,
    color: '#333',
    marginBottom: 8,
  },
  confidenceValue: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#5196F4',
    marginBottom: 8,
  },
  confidenceBar: {
    height: 8,
    backgroundColor: '#E0E0E0',
    borderRadius: 4,
  },
  confidenceProgress: {
    height: 8,
    backgroundColor: '#5196F4',
    borderRadius: 4,
  },
  factorsContainer: {
    marginBottom: 24,
  },
  factorsTitle: {
    fontSize: 16,
    color: '#333',
    marginBottom: 16,
  },
  factorItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  factorDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginRight: 12,
  },
  factorName: {
    flex: 1,
    fontSize: 14,
    color: '#333',
  },
  factorImpact: {
    fontSize: 14,
    fontWeight: '600',
  },
  detailButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#5196F4',
    borderRadius: 8,
    padding: 12,
  },
  detailButtonText: {
    fontSize: 14,
    color: '#5196F4',
    marginRight: 4,
  },
});

export default HomeScreen;
